

.chat-ai-message-item {
  width: 100%;
  max-width: 100%;
  height: auto;
  padding: 0 24px;
  position: relative;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
}

.chat-ai-message-list-item-bottom {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  width: 100%;
}

.chat-ai-message-list-item-name {
  width: 100%;
  font-size: 12px;
  color: #bfbfbf;
  padding: 4px 0 4px 0;
}

.chat-ai-message-list-item-message-block {
  padding: 16px;
  max-width: calc(90% - 40px);
  min-height: 20px;
  min-width: 110px;
  font-size: 14px;
  text-align: left;
  word-break: break-all;
  position: relative;
  background-color: #fff;
  
  .el-tag {
    cursor: pointer;
    background-color: #ECF5FF;
  }
  
}

.chat-ai-message-list-item-message-session-business-source-documents-block {
  position: relative;
  
  .chat-ai-message-list-item-message-session-business-source-documents-title {
    position: absolute;
    top: 4px;
  }
  
  .el-tag {
    margin-bottom: 6px;
    margin-right: 6px;
    max-width: 335px;
    @include text-ellipsis();
  }
  
  span:nth-of-type(2) {
    margin-left: 60px;
    max-width: 200px;
  }
  
}

.chat-ai-message-list-item-message-session-business-source-documents-title {
  font-size: 12px;
  color: #8C8C8C;
}

.chat-ai-message-list-item-message-session-tip-block {
  cursor: pointer;
  font-size: 12px;
  color: #8C8C8C;
  margin-top: 8px;
}

.chat-ai-message-list-item-message-time {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  color: #bfbfbf;
  margin-top: 4px;
}

.chat-ai-message-list-item-operator {
  
  margin-top: 6px;
  width: 90%;
  max-width: calc(90% - 40px);
  display: flex;
  justify-content: space-between;
  
  i {
    cursor: pointer;
    color: #8C8C8C;
    display: inline-block;
    position: relative;
    width: 28px;
  }
  
  i {
    &::after {
      content: "";
      display: inline-block;
      width: 1px;
      height: 12px;
      background-color: #bfbfbf;
      position: absolute;
      top: 5px;
      right: 5px;
    }
  }
  
  i:last-child {
    &::after {
      display: none;
    }
  }
  
}

.chat-ai-message-list-item-operator-other {
  display: flex;
}

.chat-ai-message-list-item-operator-left {
  display: flex;
  .chat-ai-message-list-item-operator-item + .chat-ai-message-list-item-operator-item {
    margin-left: 10px;
  }
}

.chat-ai-message-list-item-operator-item {
  cursor: pointer;
  i {
    width: 20px;
    &::after {
      display: none;
    }
  }
  span {
    font-size: 13px;
  }
  &:hover {
    color: $color-primary;
    i {
      color: $color-primary;
    }
  }
}

.chat-ai-message-list-item-message-content {
  .vue-markdown {
    p:nth-of-type(1) {
      margin: 0;
    }
    ol {
      padding-left: 0;
    }
    ul {
      padding-left: 0;
    }
  }
  
  .chat-ai-message-list-item-message-content-html {
    // TODO 暂时解决方法，无法确定后续都是p或span,下面样式是强制覆盖后端传递过来的html样式，防止信息超出对话框
    p  {
      white-space: normal!important;
      span {
        white-space: normal!important;
      }
    }
    p:nth-of-type(1) {
      margin: 0;
    }
    li {
      /* 移除默认的列表样式 */
      list-style: none;
      /* 设置相对定位，作为自定义标记的参考点 */
      position: relative;
      padding-left: 20px;
      
      &::before {
        /* 使用计数器创建自定义标记 */
        content: counter(list-item) ". ";
        /* 绝对定位自定义标记 */
        position: absolute;
        /* 根据需要调整标记的位置 */
        left: 0px;
      }
      
    }
    ol {
      padding-left: 0;
      list-style-type: decimal !important;
    }
    ul {
      padding-left: 0;
      list-style-type: decimal !important;
    }
    img {
      max-width: 100%;
    }
  }
}

.chat-ai-message-list-item-like-status {
  .chat-ai-message-list-item-operator-like-icon {
    color: $color-primary;
  }
  .chat-ai-message-list-item-operator-dislike-icon {
    color: #8C8C8C;
  }
}

.chat-ai-message-list-item-dislike-status {
  .chat-ai-message-list-item-operator-like-icon {
    color: #8C8C8C;
  }
  .chat-ai-message-list-item-operator-dislike-icon {
    color: $color-danger;
  }
}

.chat-ai-message-list-item-stop-status {
  .chat-ai-message-list-item-message-content {
    color: #8C8C8C;
  }
}

/* start left */
.chat-ai-message-list-item-left  {
  
  .chat-ai-message-list-item-message-content {
    border-radius: 4px;
    line-height: 24px;
  }
  
  .chat-ai-message-list-item-message-block {
    border-radius: 0px 8px 8px 8px;
    border: 0.5px solid rgba(25, 31, 37, 0.12);
  }
  
  .chat-ai-message-list-item-message-time {
    justify-content: flex-start;
  }
  
  .chat-ai-message-list-item-message-session {
    width: 100%;
  }
  
  .chat-ai-message-list-item-message-block {
    position: relative;
    .ai-textToReports__fullScreen {
      position: absolute;
    }
  }
  
}
/* end left */

/* start right */
.chat-ai-message-list-item-right {
  
  flex-direction: row-reverse;
  
  .chat-ai-message-list-item-message-session {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
  
  .chat-ai-message-list-item-bottom {
    flex-direction: row-reverse;
  }
  
  .chat-ai-message-list-item-message-block {
    border-radius: 8px 0px 8px 8px;
    border: 0.5px solid rgba(0, 209, 178, 0.32);
    min-width: 0;
    background-color: $color-primary;
    color: #fff;
  }
  
  .chat-ai-message-list-item-name {
    display: flex;
    justify-content: flex-end;
  }
  
  .chat-ai-message-avatar {
    margin: 0;
    margin-left: 10px;
  }
  
}
/* end right */